<template>
  <div class="user-sell">
    <div class="sell" v-for="(item, index) in userSellList" :key="index">
      <div class="right-content">
        <div class="order-title">订单{{ index + 1 }}</div>
        <div class="right-item info-row">
          <span>姓名：<span class="item-text">{{ item.ownName }}</span></span>
          <span>手机号：<span class="item-text">{{ item.phone }}</span></span>
        </div>
        <div class="right-item time-row">
          <span>创建时间：<span class="item-text">{{ item.createTime | formatTimer }}</span></span>
          <span>更新时间：<span class="item-text">{{ item.updateTime | formatTimer }}</span></span>
        </div>
        <div class="right-item address-row">
          <span class="address-label">收货地址：</span>
          <span class="item-text address" :title="item.address">{{ item.address }}</span>
        </div>
        <div class="item-content">
          <span class="price">￥ {{ item.uninPricee }}</span>
          <el-tag :type="item.type === 0 ? 'danger' : 'success'" size="mini">
            {{ item.type === 0 ? "已发货" : "未发货" }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectSellByUserName } from "../../../api/order";
export default {
  data() {
    return {
      userSellList: [],
    };
  },
  filters: {
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  created() {
    this.$store.commit("updateUserActiveIndex", "3-2");
    selectSellByUserName({}).then((res) => {
      this.userSellList = res.data;
    });
  },
};
</script>

<style lang="less" scoped>
.user-sell {
  margin: 0 auto;
  width: 900px;
  background: #fff;
  padding: 0 20px;

  .sell {
    box-sizing: border-box;
    padding: 20px 24px 16px 24px;
    margin: 20px 0 10px;
    border: 1px solid #f2f2f2;
    border-radius: 8px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

    .right-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;

      .order-title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 4px;
        color: #333;
      }

      .right-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #444;
        min-height: 28px;
      }

      .info-row {
        justify-content: space-between;
        gap: 40px;
      }

      .time-row {
        justify-content: flex-start;
        gap: 40px;
      }

      .address-row {
        align-items: center;
        gap: 8px;

        .address-label {
          color: #888;
        }

        .address {
          max-width: 600px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          vertical-align: middle;
        }
      }

      .item-text {
        color: #666;
      }

      .price {
        font-size: 16px;
        color: #e4393c;
        font-weight: bold;
        margin-right: 20px;
      }

      .item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        width: 100%;
      }
    }
  }
}
</style>
